<template>
<div class="charts-border" style="height:400px;width:100%;">
  <v-chart
      :options="option"
      :autoresize="true"
      theme="chartsTheme"
    />
</div>
</template>
<script>
import { ChartLine, ChartBar, ChartPie } from "@/components/charts"; // 图表组件
import constData from "@/util/constData"; // 保存的常量
// 工具
import axios from "axios";
import dayjs from "dayjs";

export default {
  components: {},
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              color: "rgba(0,0,0,0.2)",
              width: 1,
              type: "solid"
            }
          }
        },

        legend: {
          data: ["加油区", "卸油口", "财务", "收银台"]
        },
        singleAxis: {
          top: 150,
          bottom: 50,
          axisTick: { // 坐标轴刻度相关设置。
            alignWithLabel: true, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
            inside: false, // 坐标轴刻度是否朝内，默认朝外。
            length: 5, // 坐标轴刻度的长度。
            lineStyle: { // 刻度线的样式。
              color: 'white',
              width: 2
            }
          },
          axisLabel: { // 坐标轴刻度标签的相关设置。
            textStyle: { // 写在外面没效果
              color: 'white',
              fontSize: '14'
            }
          },
          type: "time",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              opacity: 0.9
            }
          },
          axisLine: { // 坐标轴轴线相关设置。
            show: true, // 是否显示坐标轴
            // symbol: ['none', 'arrow'], // 坐标轴的箭头
            lineStyle: {
              color: 'white',
              width: '2',
              type: 'solid' // 坐标轴的类型，solid、dashed、dotted
            }
          },

        },
        series: [
          {
            type: "themeRiver",
            itemStyle: {
              emphasis: {
                shadowBlur: 20,
                shadowColor: "rgba(0, 0, 0, 0.8)"
              }
            },
            label: {
              color: "white",
              position: "top",
              fontSize: 14,
            },
            data: [
              ["2019/05/08", 35, "加油区"],
              ["2019/05/09", 36, "加油区"],
              ["2019/05/10", 37, "加油区"],
              ["2019/05/11", 22, "加油区"],
              ["2019/05/12", 24, "加油区"],
              ["2019/05/13", 26, "加油区"],
              ["2019/05/14", 34, "加油区"],
              ["2019/05/15", 21, "加油区"],
              ["2019/05/16", 18, "加油区"],
              ["2019/05/17", 45, "加油区"],
              ["2019/05/18", 32, "加油区"],
              ["2019/05/19", 35, "加油区"],
              ["2019/05/20", 30, "加油区"],
              ["2019/05/21", 28, "加油区"],
              ["2019/05/22", 27, "加油区"],
              ["2019/05/23", 26, "加油区"],
              ["2019/05/24", 15, "加油区"],
              ["2019/05/25", 30, "加油区"],
              ["2019/05/26", 35, "加油区"],
              ["2019/05/27", 42, "加油区"],
              ["2019/05/28", 42, "加油区"],
              ["2019/05/08", 21, "卸油口"],
              ["2019/05/09", 25, "卸油口"],
              ["2019/05/10", 27, "卸油口"],
              ["2019/05/11", 23, "卸油口"],
              ["2019/05/12", 24, "卸油口"],
              ["2019/05/13", 21, "卸油口"],
              ["2019/05/14", 35, "卸油口"],
              ["2019/05/15", 39, "卸油口"],
              ["2019/05/16", 40, "卸油口"],
              ["2019/05/17", 36, "卸油口"],
              ["2019/05/18", 33, "卸油口"],
              ["2019/05/19", 43, "卸油口"],
              ["2019/05/20", 40, "卸油口"],
              ["2019/05/21", 34, "卸油口"],
              ["2019/05/22", 28, "卸油口"],
              ["2019/05/23", 26, "卸油口"],
              ["2019/05/24", 37, "卸油口"],
              ["2019/05/25", 41, "卸油口"],
              ["2019/05/26", 46, "卸油口"],
              ["2019/05/27", 47, "卸油口"],
              ["2019/05/28", 41, "卸油口"],
              ["2019/05/08", 10, "财务"],
              ["2019/05/09", 15, "财务"],
              ["2019/05/10", 35, "财务"],
              ["2019/05/11", 38, "财务"],
              ["2019/05/12", 22, "财务"],
              ["2019/05/13", 16, "财务"],
              ["2019/05/14", 7, "财务"],
              ["2019/05/15", 2, "财务"],
              ["2019/05/16", 17, "财务"],
              ["2019/05/17", 33, "财务"],
              ["2019/05/18", 40, "财务"],
              ["2019/05/19", 32, "财务"],
              ["2019/05/20", 26, "财务"],
              ["2019/05/21", 35, "财务"],
              ["2019/05/22", 40, "财务"],
              ["2019/05/23", 32, "财务"],
              ["2019/05/24", 26, "财务"],
              ["2019/05/25", 22, "财务"],
              ["2019/05/26", 16, "财务"],
              ["2019/05/27", 22, "财务"],
              ["2019/05/28", 10, "财务"],
              ["2019/05/08", 10, "收银台"],
              ["2019/05/09", 15, "收银台"],
              ["2019/05/10", 35, "收银台"],
              ["2019/05/11", 38, "收银台"],
              ["2019/05/12", 22, "收银台"],
              ["2019/05/13", 16, "收银台"],
              ["2019/05/14", 7, "收银台"],
              ["2019/05/15", 2, "收银台"],
              ["2019/05/16", 17, "收银台"],
              ["2019/05/17", 33, "收银台"],
              ["2019/05/18", 40, "收银台"],
              ["2019/05/19", 32, "收银台"],
              ["2019/05/20", 26, "收银台"],
              ["2019/05/21", 35, "收银台"],
              ["2019/05/22", 40, "收银台"],
              ["2019/05/23", 32, "收银台"],
              ["2019/05/24", 26, "收银台"],
              ["2019/05/25", 22, "收银台"],
              ["2019/05/26", 16, "收银台"],
              ["2019/05/27", 22, "收银台"],
              ["2019/05/28", 10, "收银台"]
            ]
          }
        ]
      }
    };
  },
  watch: {},
  mounted() {},
  methods: {}
};
</script>

<style lang="less">
</style>

